<style lang='scss'>
$headHeight: 58px;
$submenuWidth: 140px;

.header {
  height: $headHeight;
  //   background-color: #1f2d3d;
  background: linear-gradient(#292929, #252525);
  color: #fff;
  display: flex;
  align-items: center;
  > :last-child {
    flex: 1;
    display: flex;
    font-size: 18px;
    padding: 0 15px;
    justify-content: flex-end;
    align-items: center;
    > a {
      margin-right: 5px;
    }
  }
  .logo {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // background-color: #1c2b36;
    width: 200px;
    text-align: center;
    img {
      vertical-align: middle;
      width: 151px;
      height: 26px;
    }
  }
  .menu-btn {
    cursor: pointer;
  }

  // 展示用户名称的区域
  .el-dropdown-link.el-dropdown-selfdefine {
    cursor: pointer;
    color: #409eff;
    font-size: 16px;
    .el-icon-caret-bottom.el-icon--right:hover {
      color: #40c9ff;
    }
  }
}

.menu {
  height: $headHeight;
  cursor: pointer;

  a.active {
    border-radius: 5px 0 0 0;
    border-left: 3px solid #fff;
    color: #fff;
  }

  // 所有后代li的通用设置
  li {
    background: linear-gradient(#292929, #252525);
    border-bottom: 2px solid #181818;
    border-top: 2px solid #303030;
    min-width: $submenuWidth;

    &:hover {
      background-color: #1c1c1c;
      background: linear-gradient(#1c1c1c, #1b1b1b);

      border-bottom: 2px solid #222222;
      border-top: 2px solid #1b1b1b;

      & > a {
        border-radius: 5px 0 0 0;
        border-left: 3px solid #fff;
        color: #fff;
      }

      // 鼠标经过li元素时,显示下级菜单
      & > .submenu {
        max-height: 2000px;
        z-index: 10;
        left: $submenuWidth;
        & > li {
          opacity: 1;
          transform: none;
          &:nth-child(1) {
            transition-delay: 0s;
          }
          & :nth-child(2) {
            transition-delay: 50ms;
          }
          & :nth-child(3) {
            transition-delay: 100ms;
          }
          & :nth-child(4) {
            transition-delay: 150ms;
          }
          & :nth-child(5) {
            transition-delay: 200ms;
          }
          & :nth-child(6) {
            transition-delay: 250ms;
          }
          & :nth-child(7) {
            transition-delay: 300ms;
          }
          & :nth-child(8) {
            transition-delay: 350ms;
          }
        }
      }
    }

    & > a {
      border-left: 3px solid rgba(0, 0, 0, 0);
      color: #808080;
      display: block;
      font-family: "Lucida Console";
      font-size: 16px;
      line-height: 54px;
      padding: 0 10px 0 25px;
      text-decoration: none;
      // text-transform: uppercase;
    }

    & > .submenu {
      left: 0;
      max-height: 0;
      position: absolute;
      top: 100%;
      z-index: 0;
      perspective: 400px;
      // 不设置偏移,渐变消失动画会与菜单菜单重叠在一起
      left: $submenuWidth;

      // 初始状态设置为隐藏
      & > li {
        opacity: 0;
        transform: rotateY(90deg);
        transition: opacity 0.4s, transform 0.5s;

        &:nth-child(1) {
          transition-delay: 350ms;
        }
        &:nth-child(2) {
          transition-delay: 300ms;
        }
        &:nth-child(3) {
          transition-delay: 250ms;
        }
        &:nth-child(4) {
          transition-delay: 200ms;
        }
        &:nth-child(5) {
          transition-delay: 150ms;
        }
        &:nth-child(6) {
          transition-delay: 100ms;
        }
        &:nth-child(7) {
          transition-delay: 50ms;
        }
        &:nth-child(8) {
          transition-delay: 0s;
        }

        & > a {
          font-size: 14px;
        }
      }
    }
  }

  & > li {
    display: block;
    float: left;
    position: relative;
    &:first-child {
      border-radius: 5px 0 0;
    }

    & > .submenu,
    &:hover > .submenu {
      // 第一级不需要偏移子菜单容器宽度
      left: 0;
    }
  }
  
}
.product-code{
  margin-right: 15px;

}
</style>
<template>
  <div>
    <header class="header">
      <div class="logo">
        <img src="../../static/imgs/logo.png" @click="goHome">
      </div>
      <div class="broswer-tip">
          <Breadcrumb></Breadcrumb>
      </div>
      <!-- <ul class="menu" id="js-menu">
        <li class="one-level" :data-level="1" data-path="/main">
          <a href="#">首页</a>
        </li>
        <li v-for="(oneLevel,oneIndex) in userInfo.menu" :key="oneIndex" :data-path="oneLevel.path" :data-level="1">
          <a>{{oneLevel.name}}</a>
          <ul class="submenu" v-if="oneLevel.children.length > 0 ">
            <li
              v-for="(twoLevel,twoIndex) in oneLevel.children"
              :data-index="twoIndex"
              class="two-level"
              :key="twoIndex"
              :data-path="twoLevel.path"
              data-level="2"
            >
              <a href="#">{{twoLevel.name}}</a>
              <ul class="submenu" v-if="twoLevel.children && twoLevel.children.length > 0 ">
                <li
                  v-for="(threeLevel,threeIndex) in twoLevel.children"
                  :data-index="threeIndex"
                  :key="threeIndex"
                  data-level="3"
                  :data-path="threeLevel.path"
                >
                  <a href="#">{{threeLevel.name}}</a>
                  <ul class="submenu" v-if="threeLevel.children && threeLevel.children.length > 0 ">
                    <li
                      v-for="(fourLevel,fourIndex) in threeLevel.children"
                      :data-index="fourIndex"
                      :key="fourIndex"
                      data-level="4"
                      :data-path="fourLevel.path"
                    >
                      <a href="#">{{fourLevel.name}}</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
          </ul>
        </li>
      </ul> -->

      <div>
        <span v-if="$route.params.productCode" class="product-code">
          产品编码：{{$route.params.productCode}}
        </span>
        <a>
          <i class="fa fa-user-circle-o"></i>
        </a>
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            <i class="im-icon-user1"></i>
            {{userInfo.name || ''}}
            <i class="el-icon-caret-bottom el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="logout">
              <i class="im-icon-edit dropdown-icon"></i>
              退出登录
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </header>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutaions, mapStates } from "vuex";
import { clearLoginInfo,GetQueryString ,changeURLArg} from 'src/utils/tools';
import Breadcrumb from './Breadcrumb.vue'
import fetch from "src/utils/fetch";
import API from "src/utils/api";

export default {
  props: ['userInfo'],
  components:{
    Breadcrumb
  },
  data() {
    return {
      activeIndex: '0',
    };
  },
  computed: {
    ...mapGetters(["isCollapse"])
  },
  mounted() {
    
    window.CONTEXT = this;
    let path = this.$route.path;

    // 设置当前路由对应的dom节点高亮
    function setDomActive(parent, level, close) {
      for (let i = 0; i < level; i++) {
        parent.addClass('active');
        parent.parent().siblings().find('a').removeClass('active');
        parent = parent.parent().parent().prev();
      }
    }

    // 查找当前路由对应的dom节点
    function findActiveDom(eleDom) {
      eleDom.each((index, ele) => {
        // 如果有下级菜单,递归匹配
        if ($(ele).find(' > .submenu').length > 0) {
          findActiveDom($(ele).find(' > .submenu > li'));
        }
        // 匹配到设置选中
        if (path == $(ele).data('path')) {
          setDomActive($(ele).find('>a'), $(ele).data('level'));
          return false;
        }
      })
    }
    setTimeout(() => {
      findActiveDom($('#js-menu > li'));
    }, 0);
    // 调整次级菜单的上边距
    $("#js-menu").on("mouseover", " .submenu > li > a", function (event) {
      // 显示下级菜单
      $('#js-menu > li > .submenu').css({ opacity: 1 });
      let eleData = $(this).parent().data("obj");
      let y = $(this).parent().data("index");

      // console.log($(this).data("obj"));
      // 判断是否有下级菜单
      if ($(this).next().html()) {
        // 计算下级元素的y轴位置偏移
        $(this).parent().find('> .submenu').css({ top: y * 58 + 'px' })
      }

    })

    // 点击菜单后设置高亮显示，并跳转
    $("#js-menu").on("click", " li  >a", function (event) {

      event.preventDefault();

      let path = $(this).parent().data("path");
      let level = $(this).parent().data("level");

      // 如果没有下级菜单,后面没有元素
      if (!$(this).next().html()) {
        // console.log(level, path, $(this).text())
        window.CONTEXT.$router.push({ path: path });
        setDomActive($(this), level, true);
        // 隐藏下级菜单
        $('#js-menu > li > .submenu').css({ opacity: 0 });
      }

    })


  },
  methods: {
    ...mapActions(["changeCollapse"]),
    handleSelect() {

    },
    // 退出登录
    logout() {
      const self = this;
      self.$confirm("确认退出吗?", "提示")
        .then(() => {
          clearLoginInfo();
        })
        .catch(() => {
 
        });
    },
    goHome(){
      this.$router.push({
        path: `/product`,
      })
    }
  }
};
</script>